<template>
  <div class="dashboard-container">
    <el-card style="height: 120px; margin-bottom: 20px">
      <!-- 给el-form绑定form -->
      <el-form label-width="80px" :model="form" :inline="true">
        <el-form-item label="状态">
          <el-select v-model="form.status" placeholder="请选择状态">
            <el-option
              v-for="a in reqCategory1"
              :key="a.id"
              :label="a.name"
              :value="a.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="认证类型">
          <el-select v-model="form.classify" placeholder="请选择认证类型">
            <el-option
              v-for="a in reqCategory2"
              :key="a.id"
              :label="a.name"
              :value="a.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="searchclick"
          style="margin-left: 12px"
          >筛选</el-button
        >
        <el-button @click="resetSearch">重置</el-button>
        <!-- <el-button @click="addrenyuan" type="success">添加</el-button> -->
      </el-form>
    </el-card>
    <el-table :data="tableData" border>
      <el-table-column prop="id" label="ID" align="center"> </el-table-column>
      <el-table-column prop="name" label="名称" align="center">
      </el-table-column>
      <el-table-column prop="province" label="省份" align="center">
      </el-table-column>
      <el-table-column prop="district" label="市区" align="center">
      </el-table-column>
      <el-table-column prop="servename" label="服务类型" align="center">
      </el-table-column>
      <el-table-column prop="area" label="地址" align="center">
      </el-table-column>
      <el-table-column prop="guige" label="规格" align="center">
        <template slot-scope="scope">
          <!-- {{ JSON.parse(JSON.stringify(scope.row.guige)) }} -->
          <!-- {{ JSON.parse(JSON.stringify(scope.row.guige))[0] }} -->
          <!-- {{ typeof JSON.parse(scope.row.guige) }} -->
          <!-- <div v-for="(item, index) in guige" :key="index"> -->
          <el-tag
            class="ml-2"
            type="success"
            v-if="JSON.parse(JSON.stringify(scope.row.guige))[0] == '{'"
            >{{ JSON.parse(scope.row.guige).name }}</el-tag
          >
          <el-tag class="ml-2" type="success" v-else>{{
            scope.row.guige
          }}</el-tag>
          <!-- </div> -->
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" align="center">
        <template slot-scope="scope">
				   <el-tag class="ml-2" type="warning"> {{ scope.row.status | statusfilter }}</el-tag>
         
        </template>
      </el-table-column>
      <el-table-column prop="classify" label="认证类型" align="center">
			 <template slot-scope="scope">
			 		   <el-tag class="ml-2" type="primary">          {{ scope.row.classify | classifyfilter }}</el-tag>
 
        </template>
      </el-table-column>
      </el-table-column>
      <el-table-column prop="addtime" label="创建时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.addtime | datefilter }}
        </template>
      </el-table-column>
      <!-- <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="primary" @click="changerenyuan(scope.row)"
            >修改</el-button
          >
        </template>
      </el-table-column> -->
    </el-table>
    <Pagination
      :currentPage="this.form.pageNo"
      :size="this.form.pageSize"
      :total="total"
      @changelimit="changelimit"
      @changecurrentPage="changecurrentPage"
    ></Pagination>
    <add ref="add" @refresh="refresh"></add>
  </div>
</template>

<script>
import { getorderlist, delservetypedel, sxjcouponsxj } from "@/api/orderlist";
import add from "./modules/add";
export default {
  name: "Dashboard",
  components: {
    add,
  },
  data() {
    return {
      form: {
        status: 0,
        classify: 0,
        pageNo: 1,
        pageSize: 5,
      },
      total: 0,
      // 0全部 1待分配 2 待完成 5 取消订单 3 师傅已完成 4 用户确定完成  6 申请退款 7 同意退款 8 已评价 9 待付款
      reqCategory1: [
        { id: 0, name: "全部" },
        { id: 1, name: "待分配" },
        { id: 2, name: "待完成" },
        { id: 3, name: "师傅已完成" },
        { id: 4, name: "用户确定完成" },
        { id: 5, name: "取消订单" },
        { id: 6, name: "申请退款" },
        { id: 7, name: "同意退款" },
        { id: 8, name: "已评价" },
        { id: 9, name: "待付款" },
      ],
      // 0全部 1 全额支付 2 付定金  3 保姆月嫂类型
      reqCategory2: [
        { id: 0, name: "全部" },
        { id: 1, name: "全额支付" },
        { id: 2, name: "付定金" },
        { id: 3, name: "保姆月嫂类型" },
      ],
      tableData: [],
    };
  },
  filters: {
    datefilter(val) {
      if (val) {
        var date = new Date(parseInt(val) * 1000);
        var Year = date.getFullYear();
        var Moth =
          date.getMonth() + 1 < 10
            ? "0" + (date.getMonth() + 1)
            : date.getMonth() + 1;
        var Day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
        var Hour =
          date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
        var Minute =
          date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
        var Sechond =
          date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
        var GMT = Year + "-" + Moth + "-" + Day;
        // "   " +
        // Hour +
        // ":" +
        // Minute +
        // ":" +
        // Sechond;

        return GMT;
      } else {
        return "";
      }
    },
    statusfilter(val) {
			if(val==1){
				return '待分配'
			}else if(val==2){
				return '待完成'
			}else if(val==3){
				return '师傅已完成'
			}else if(val==4){
				return '用户确定完成'
			}else if(val==5){
				return '取消订单'
			}else if(val==6){
				return '申请退款'
			}else if(val==7){
				return '同意退款'
			}else if(val==8){
				return '已评价'
			}else if(val==9){
				return '待付款'
			}
		},
		classifyfilter(val){
			if(val==1){
				return '全额支付'
			}else if(val==2){
				return '付定金'
			}else if(val==3){
				return '保姆月嫂类型'
			}
		}
  },
  methods: {
    searchclick() {
      this.getcouponlist1();
    },
    resetSearch() {
      // this.form.name = "";
      this.form.status = 0;
      this.form.classify = 0;
      this.getcouponlist1();
    },
    addrenyuan() {
      this.$refs.add.add();
    },
    // 子传父:自定义事件
    refresh() {
      this.getcouponlist1();
    },
    async getcouponlist1() {
      let result = await getorderlist(this.form);
      console.log(result);
      if (result.code == 0) {
        if (result.data.data != []) {
          this.tableData = result.data.data;
          this.total = result.data.totalCount;
        }
      }
    },
    changelimit(val) {
      this.form.pageSize = val;
      this.getcouponlist1();
    },
    changecurrentPage(val) {
      this.form.pageNo = val;
      this.getcouponlist1();
    },
    changerenyuan(val) {
      this.$refs.add.edit(val);
    },
    async deldel(val) {
      let result = await delservetypedel({ id: val.id });
      if (result.code == 0) {
        this.$message({
          showClose: true,
          message: "删除成功",
          type: "success",
        });
        this.getcouponlist1();
      }
    },
  },
  watch: {
    "form.name": {
      handler(newVal) {
        if (newVal == "") {
          this.getcouponlist1();
        }
      },
    },
  },
  mounted() {
    this.getcouponlist1();
  },
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
